import styled from 'styled-components';
import {Card, Form, Row, Col, Space, Input, Button,Table} from "antd";
import {useAntdTable} from "ahooks";

const About = () => {
  const [form] = Form.useForm();

  const columns = [
    {
      title: 'name',
      dataIndex: ['name', 'last'],
    },
    {
      title: 'email',
      dataIndex: 'email',
      width: 500,
    },
    {
      title: 'phone',
      dataIndex: 'phone',
    },
    {
      title: 'gender',
      dataIndex: 'gender',
    },
    {
      title: 'gender',
      dataIndex: 'gender',
    },
    {
      title: 'Action',
      key: 'operation',
      fixed: 'right',
      width: 100,
      render: () => <a>action</a>,
    },
  ];

  const {loading, tableProps, search, params} = useAntdTable(({current, pageSize}) => {
    const query = `page=${current}&size=${pageSize}`;
    return fetch(`https://randomuser.me/api?results=55&${query}`).then(res => res.json()).then((res) => ({
      total: res.info.results,
      list: res.results,
    }));
  }, {
    form,
    defaultParams: [
      {current: 1, pageSize: 10},
      {name: 'hello'},
    ],
  });

  return (
    <Style className="main-box">
      <Card>
        <Form form={form}>
          <Row gutter={24}>
            <Col span={6}>
              <Form.Item name="name" label="姓名">
                <Input/>
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="age" label="年龄">
                <Input/>
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="name2" label="姓名2">
                <Input/>
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name="age2" label="年龄2">
                <Input/>
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item>
                <Space size="small">
                  <Button type="primary" onClick={search.submit}>确定</Button>
                  <Button onClick={search.reset}>清除</Button>
                </Space>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Card>

      <Card>
        <Table columns={columns} rowKey="email" {...tableProps} scroll={{  y: 200 }}/>
      </Card>
    </Style>
  )
}

export default About

const Style = styled.div`

`
